			var btn = document.querySelector(".btn");
			var content = document.querySelector(".content");
			var box = document.querySelector(".box");
			var game = document.querySelector(".game");
			
			
			function bump(obj01,obj02){
//				用变量将信息存起来,减少不必要的函数调用,提高性能
				var obj01Info = obj01.getBoundingClientRect();
				var obj02Info = obj02.getBoundingClientRect();
				var t1 = obj01Info.top,
					l1 = obj01Info.left,
					r1 = obj01Info.right,
					b1 = obj01Info.bottom;
				
				var t2 = obj02Info.top,
					l2 = obj02Info.left,
					r2 = obj02Info.right,
					b2 = obj02Info.bottom;
					
				if(r1 < l2 || l1 > r2 ||  t1 > b2 || b1 < t2){
					console.log("没有碰到");
					return false;
				}else{
					console.log("碰到了");
					return true;
				}
			}
			
			btn.addEventListener("click",function(){
//				box.style.display = "none";
				btn.parentNode.style.left = "-605px";
			})
			
//			随机生成圆
			function getCircle(){
				var div = document.createElement("div");
//				获取元素实际宽高
				var clientW = game.clientWidth;
				var clientH = game.clientHeight;
//				随机生成球的宽高,且直径不小于15
				var divW = divH = Math.floor(Math.random()*60 + 15);
//				随机生成top值,left值
				var divT = Math.floor(Math.random()*clientH);
				var divL = Math.floor(Math.random()*clientW);
//				防止超出屏幕,如果超出最大top/left，则让球贴边
				divT > clientH - divH ? divT = clientH - divH : '';
				divL > clientW - divW ? divL = clientW - divW : '';
//				console.log(divW,divH);
				
				div.style.width = `${divW}px`;
				div.style.height = `${divH}px`;
				div.style.top = `${divT}px`;
				div.style.left = `${divL}px`;
				div.style.borderRadius = "50%";
				div.style.backgroundColor = "white";
				div.style.position = "absolute";
//				console.log(div.style)
				game.appendChild(div);
				var allBall = document.querySelectorAll(".game div");
				allBall.forEach((e)=>{
					e.classList.remove("lastOne");
				})
				div.classList.add("lastOne");
				return div;
			}
			getCircle();
			
//			事件委托
			var firstBall = document.querySelector(".game div");
//			console.log(firstBall);
			firstBall.addEventListener("click",ballEvent)
//			球该做的事情-->新增球
			function ballEvent(){
				if(this.classList.contains("lastOne")){
					console.log("最后一个球")
				}else{
					alert("游戏结束")
					return
				}
				var allBall = document.querySelectorAll(".game div");
//				通过getCircle 的返回值 拿到每次新创建出来的圆,为下一步碰撞检测提供检测对象
				var newCircle = getCircle();
//				console.log(newCircle)
				
//				生成新的圆后,进行碰撞检测;
				(function check(target){
					allBall.forEach((e)=>{
//						如果新生成的圆与已有的圆碰撞,则移除新圆并重新创建新圆
						if(bump(e,target)){
//							1.先移除
							target.remove();
//							2.再创建
							var newCircle = getCircle();
//							3.通过递归传入新创建的圆,重新进行判断
							check(newCircle)
						}else{
							addEvent();
						}
					})
				}(newCircle));
			}
			
			
//			给每一个球添加事件
			function addEvent(){
				var allBall = document.querySelectorAll(".game div");
				allBall.forEach((e)=>{
					e.addEventListener("click",ballEvent);
				});
			}
